<!-- <template>
  <div>
    <slot name="top" />
    <h2>Hello 组件</h2>
    <slot name="bottom" />
  </div>
</template> -->

<script>
import { h, watch } from 'vue'

export default {
  // 声明props数据
  props: ['name', 'age'],

  // setup入口
  setup(props, { attrs, emit, expose, slots }) {
    console.log('hello props', props)
    // console.log('hello context', context)
    console.log('hello attrs', attrs)
    console.log('hello slots', slots)
    console.log('default', slots.default?.())

    watch(
      () => props.age,
      (newValue) => {
        console.log('传递给我的 age 发生变化了', newValue)
      }
    )

    // setup 可以有返回值，
    //  1. 返回值为 对象
    //  2. 返回值为 函数，就是一个 render 函数
    return () => h('div', [slots.top(), h('h2', 'Hello 组件'), slots.bottom()])
  },
}
</script>
